$(document).ready(function () {


    layui.use(function () {

        var layer = layui.layer;

        initSubMenu();
        initChart()

    });
})

var queryParams

function initChart() {
    queryTitleData()
    queryPoliticalstatusData()
    queryMaritalstatusData()
    queryPostData()
    queryHouseAndLoanData()
}

// 结构层次统计
function queryTitleData() {

    new AjaxChain()
        .setUrl('/person/title/count')
        .then(data => {
            var yData = []
            data.forEach(item => {
                yData.push({
                    value: item.num,
                    name: item.value,
                    key: item.key,
                    type: 'professionalTitle'
                },)
            });

            drawPie(yData, 'title-chart')
        })
        .send();
}

// 党团情况统计
function queryPoliticalstatusData() {

    new AjaxChain()
        .setUrl('/person/politicalstatus/count')
        .then(data => {
            var yData = []
            data.forEach(item => {
                yData.push({
                    value: item.num,
                    name: item.value,
                    key: item.key,
                    type: 'politicalStatus'
                },)

            });

            drawPie(yData, 'politicalstatus-chart')
        })
        .send();
}

// 职务统计
function queryPostData() {

    new AjaxChain()
        .setUrl('/person/post/count')
        .then(data => {

            data.sort((a, b) => a.key - b.key);

            var totol = 0;

            data.map(item => totol = totol + item.num)
            $('.left-number>.number-item').eq(0).find('span').html(totol)

            var leader = 0;

            data.map(item => {
                if ([1, 2, 3].includes(item.key)) {
                    leader = leader + item.num
                }
            })
            $('.left-number>.number-item').eq(1).find('span').html(leader)
            $('.left-number>.number-item').eq(2).find('span').html(totol - leader)


            $('.post-con').empty().append(
                data.reduce((x, y) => {
                    return x + `
                <div class="post-item">
                    <img src="../static/img/post${y.key}.png" alt="">
                    <div onclick="showMore({post:${y.key}})">
                        <div>${y.value}</div>
                        <div class="post-num">${y.num}</div>
                    </div>
                </div>
                `
                }, '')
            )


        })
        .send();
}



// 婚姻状况及轮休统计
function queryMaritalstatusData() {

    new AjaxChain()
        .setUrl('/person/maritalstatus/count')
        .then(data => {

            $('#marital-number').html(data.filter(item => item.key==2)[0]?.num||0)


        })
        .send();

    new AjaxChain()
        .setUrl('/person/vacationstatus/count')
        .then(data => {

            $('#vacation-number').html(data.filter(item => item.key==1)[0]?.num)
            
        })
        .send();
}




// 购房及贷款情况
function queryHouseAndLoanData() {

    new AjaxChain()
        .setUrl('/person/house/count')
        .then(data => {
            data.map(item => {
                if (item.key == 2) {
                    $('#house-has').html(item.num + '人')
                } else {
                    $('#house-no').html(item.num + '人')
                }
            })

        })
        .send();

    new AjaxChain()
        .setUrl('/person/loan/count')
        .then(data => {

            data.map(item => {
                if (item.key == 2) {
                    $('#house-loan').html(item.num + '人')
                }
            })
        })
        .send();
}





// 构建饼图
function drawPie(data, id) {

    var option = {
        color: ['#E33F3F', '#56AFFF', '#FFFF72', '#59DFA9', '#FF819C','#ff902e','#2b97c1'],
        legend: {
            orient: 'vertical',
            left: '60%',
            top: 'middle',
            itemWidth: 10,
            itemHeight: 10,
            icon: 'rect',
            itemGap: 20,
            // selectedMode: false,
            formatter(name) {
                let result = data.find((item) => item.name == name);

                return `{a|${result.name}}   ${result.value} 人`;
            },
            textStyle: {
                color: '#fff',
                rich: {
                    a: {
                        fontSize: 12,
                        color: '#fff',
                        padding: [0, 6, 0, 6],
                    },
                    b: {
                        fontSize: 14,
                        color: '#fff',
                        padding: [0, 6, 0, 6],
                    },
                },
            },
        },
        series: [
            {
                type: 'pie',
                center: ['30%', '50%'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
    };
    var mychart = echarts.init(document.getElementById(id));
    mychart.setOption(option);

    mychart.on('click', function (params) {
        
        showMore({
            [params.data.type]:params.data.key
        })

    });


}




// 查看更多

function showMore(pr) {

    layer.open({
        type: 1, // page 层类型
        area: ['70%', '70%'],
        title: '人员信息',
        shade: 0.6, // 遮罩透明度
        shadeClose: true, // 点击遮罩区域，关闭弹层
        maxmin: false, // 允许全屏最小化
        anim: 0, // 0-6 的动画形式，-1 不开启
        content: `<div style="width: 100%;height: 100%;display: flex;"><table id="table" lay-filter="table" style="width: 100%;height: 100%;"></table></div>`,
        success: function () {
            queryTable(pr)
        }
    });

}



// 查询表格数据
queryTable = (pr) => {

    pr.pageSize = 10;


    layui.use('table', function () {

        var table = layui.table;
        //展示已知数据
        table.render({
            elem: '#table'
            , text: {
                none: '暂无数据'
            }
            , method: 'POST'
            , url: ajaxPrefix() + "/person/mulit/list"
            , headers: {
                SessionId: JSON.parse(localStorage.getItem('sessionId'))
            }
            , contentType: 'application/json'
            , where: pr
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status == 200 ? 0 : 1, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.result.total, //解析数据长度
                    "data": res.result.data //解析数据列表
                };
            }
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                ,
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , cols: [[ //标题栏
                { field: 'name', title: '姓名', align: "center" }
                , { field: 'professionalTitleDesc', title: '消防救援衔', align: "center" }
                , { field: 'cellphone', title: '联系方式', align: "center" }
                , {
                    field: 'unit', title: '年龄', align: "center"
                    , templet: function (d) {

                        if (d.birthDate != '' && d.birthDate) {
                            return $.calculateAge(d.birthDate);
                        } else {
                            return ''
                        }
                    },
                }
                , { field: 'postDesc', title: '职务', align: "center" }
                , { field: 'positionalPositionDesc', title: '专业岗位', align: "center" }
                , { field: 'workDate', title: '入职时间', align: "center" }
            ]]
            , height: 'full'
            // ,skin: 'line' //表格风格
            , even: true
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 3 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页

            }
            , done: function (res, curr, count) {

                $('.layui-table-cell').height($('#table').height() / 20);
            },

        });

    });
}
